<?php
/**
 * Created by PhpStorm.
 * User: linyh
 * Date: 2017/11/25 0025 10:13
 */
?>
<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css">
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        设计列表
    </h1>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>产品名称</th>
                        <th>设计师</th>
                        <th>产品配方</th>
                        <th>原料成本</th>
                        <th>产品详情</th>
                        <th>配方状态</th>
                        <th>政府意见</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</section>

<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/dataTables.bootstrap.min.js"></script>
<script>
var $table = $('#table');
var $tr = $table.find('tbody tr').remove();
$.ajax('/api/product/list', {
    type: 'GET',
    data: {
    },
    dataType: 'json',
    headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
}).then(function(ret) {
    if(ret.state ==0) {
        var data = ret.data;
        $('#table').DataTable({
            "columnDefs": [
                {
                    "targets": 2,
                    "data": "title",
                    "render": function ( data, type, row, meta ) {
                        var string = '';
                        for(var i in data) {
                            string += data[i].entry.name + '*' + data[i].num + ((data[i].entry.unit)?(data[i].entry.unit):'件') + ';';
                        }
                        return string;
                    }
                },
                {
                    "targets": 4,
                    "data": "title",
                    "render": function ( data, type, row, meta ) {
                        return '<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modal-default-' + row.id + '">点击查看</button>' +
                            '<div class="modal fade" id="modal-default-' + row.id + '">' +
                            '    <div class="modal-dialog">' +
                            '        <div class="modal-content">' +
                            '            <div class="modal-header">' +
                            '                <button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                            '                    <span aria-hidden="true">×</span></button>' +
                            '                <h4 class="modal-title text-center">产品详情</h4>' +
                            '            </div>' +
                            '            <div class="modal-body text-center">' +
                            '               <div id="pro_detail">' + row.description + '</div>' +
                            '            </div>' +
                            '        </div>' +
                            '    </div>' +
                            '</div>';
                    }
                },
                {
                    "targets": 5,
                    "data": "title",
                    "render": function ( data, type, row, meta ) {
                        return ['未知', '待审核', '通过', '拒绝'][data];
                    }
                },
            ],
            data: data.list,
            columns: [
                { data: 'name' },
                { data: 'designer.name' },
                { data: 'productMaterials' },
                { data: 'material_cost' },
                { data: 'description' },
                { data: 'status' },
                { data: 'govern_opinion' },
                // { data: 'office' }
            ],
            'paging'      : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
        })
        $("table tr th").css({"text-align":"center"});
        $("table").css({"text-align":"center"});
        $(document.getElementById("pro_detail").getElementsByTagName('img')).css({"max-width":"100%"});
    } else {
        alert(ret.message);
    }
});
</script>